<template>
  <div>
    <div class="game_content">
      <ul class="content_box">
        <li
          class="content_list"
          v-for="(title, index) in titles"
          :key="index"
          @click="itemClick(index)"
          :class="[currentIndex === index ? 'content_list_active' : '']"
        >
          {{ title }}
        </li>
      </ul>
      <div>
        <game-info v-if="currentIndex === 0" :list="hotPageList[0]" />
        <game-info v-else :list="newsBannerList[0]" />
      </div>
    </div>
    <div class="game_content">
      <div class="content_title">新游</div>
      <div v-if="currentIndex === 0">
        <div v-for="(item, index) in hotPageList[1]" :key="index">
          <game-list-item v-if="item.game_type" :item="item"/>
          <game-banner-item v-if="item.tp_type" :showBanner="item"/>
        </div>
      </div>
      <div v-if="currentIndex === 1">
        <div v-for="(item, index) in newsBannerList[1]" :key="index">
          <game-list-item v-if="item.game_type" :item="item"/>
          <game-banner-item v-if="item.tp_type" :showBanner="item"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GameInfo from "./childComps/GameInfo.vue"
import GameListItem from "./childComps/GameListItem.vue"
import GameBannerItem from "./childComps/GameBannerItem.vue"
export default {
  components: { GameInfo,GameListItem,GameBannerItem },
  props: {
    hotList: {
      type: Array,
      default() {
        return [];
      },
    },
    newestList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      titles: ["热门游戏", "最新上架"],
      currentIndex: 0,
    };
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
    },
  },
  computed: {
    hotPageList() {
      if (this.hotList && this.hotList.length >= 8) {
        let hotPageList01 = [];
        hotPageList01.push(this.hotList.slice(0, 8));
        hotPageList01.push(this.hotList.slice(8));
        return hotPageList01;
      } else {
        return this.hotList;
      }
    },
    newsBannerList() {
      if (this.newestList && this.newestList.length >= 8) {
        let newsBannerList01 = [];
        newsBannerList01.push(this.newestList.slice(0, 8));
        newsBannerList01.push(this.newestList.slice(8));
        return newsBannerList01;
      } else {
        return this.newestList;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.game_content {
  box-sizing: border-box;
  margin: 0.533333rem 0.266667rem;
  width: 9.466667rem;
  height: auto;
  background: #fff;
  border-radius: 0.266667rem;
  padding: 0 0.266667rem;
  .content_box {
    padding: 0.4rem 0;
    height: 0.72rem;
    font-size: 0.346667rem;
    color: #999;
    display: flex;
    .content_list {
      margin-right: 0.266667rem;
      width: 2.026667rem;
      height: 0.72rem;
      border-radius: 0.36rem;
      background: #f3f3f3;
      text-align: center;
      line-height: 0.72rem;
    }
    .content_list_active {
      background: #ff5543;
      color: #fff;
    }
  }
}

.content_title {
  font-size: .48rem;
  font-weight: bold;
  color: #222;
  padding: .266667rem 0;
}
</style>